import { Tabs } from "expo-router";
import React from "react";
import { Platform } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import { HapticTab } from "@/components/HapticTab";
import TabBarBackground from "@/components/ui/TabBarBackground";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarLabelStyle: {
          fontSize: 14, // 更大的标签文字
          fontWeight: "500",
        },
        // tabBarIconStyle: {
        //   marginTop: 5,
        // },
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: "absolute",
            height: 65, // 增加底部导航栏高度
            paddingTop: 5,
            // paddingBottom: 18,
          },
          default: {
            height: 65, // 增加底部导航栏高度
            paddingTop: 5,
            // paddingBottom: 18,
          },
        }),
      }}
    >
      <Tabs.Screen
        name='index'
        options={{
          title: "匹配",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name='account-group'
              size={28}
              color={color}
            />
          ),
        }}
      />
      <Tabs.Screen
        name='chat'
        options={{
          title: "聊天",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name='chat' size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name='discover'
        options={{
          title: "发现",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name='compass' size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name='profile'
        options={{
          title: "我的",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name='account' size={28} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}
